<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 700px;
        margin: 100px auto;
        position: relative;
        padding-left: 50px;
    }

    .box img {
        width: 280px;
        margin-left: 25%;
        display: block;
        margin-bottom: 20px;
    }

    .box input {
        width: 548px;
        height: 38px;
        border: 2px solid #c4c7ce;
        outline-style: none;
        border-radius: 10px 0 0 10px;
        text-indent: 10px;
        border-right: 0;
    }

    .box input:hover {
        border: 2px solid #9195a3;
        opacity: .8;
        border-right: 0;

    }

    .box button {
        width: 108px;
        height: 44px;
        border-radius: 0 10px 10px 0;
        outline-style: none;
        border: none;
        cursor: pointer;
        background-color: #4e6ef2;
        color: #ffffff;
        font-size: 17px;
        position: relative;
        top: 2px;
        left: -5px;
    }

    .box .tu {
        background: url('../img/zhaoxiang.png') no-repeat 0 -51px;
        width: 24px;
        height: 20px;
        position: absolute;
        top: 84%;
        z-index: 1;
        left: 74%;
        cursor: pointer;
    }

    .box .tu:hover {
        background-position: 0 -75px;
    }

    .box button:hover {
        background-color: #4662d9;
    }
</style>

<body>
    <div class="box">
        <img src="../img/baidu.png" alt="">
        <span><input type="text"></span>
        <span class="tu"></span>
        <button>百度一下</button>
    </div>
</body>

</html>